forum

home / developersection / forums / vertical scrollspy with bootstrap library

Ask Question

Vertical scrollspy with Bootstrap library

Ethan Karla 523 28-Jul-2021

How to make a vertical scrollspy with Bootstrap library?
bootstrap bootstrap 
Updated on 28-Jul-2021
Ethan Karla

Student

An enthusiastic, adaptive, and fast-learning person with a broad and acute interest in the discovery of new innovative drugs, I particularly enjoy collaborating with scientists from different disciplines to develop new skills and solve new challenges.

Follow
Can you answer this question?
Answer

1 Answers

Anonymous User

Anonymous User

04-Aug-2021

Let's have an example to demonstrate toaster with the help of Bootstrap : 

<!DOCTYPE html>

<html>

<head>

    <title>Bootstrap Example</title>

    <meta charset='utf-8'>

    <meta name='viewport' content='width=device-width, initial-scale=1'>

    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>

    <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js'></script>

    <style>

        body {

            position: relative;

        }

        #section1 {

            padding-top: 50px;

            height: 500px;

            color: #fff;

            background-color: #1E88E5;

        }

        #section2 {

            padding-top: 50px;

            height: 500px;

            color: #fff;

            background-color: #673ab7;

        }

        #section3 {

            padding-top: 50px;

            height: 500px;

            color: #fff;

            background-color: #ff9800;

        }

        #section41 {

            padding-top: 50px;

            height: 500px;

            color: #fff;

            background-color: #00bcd4;

        }

        #section42 {

            padding-top: 50px;

            height: 500px;

            color: #fff;

            background-color: #009688;

        }

    </style>

</head>

<body data-spy='scroll' data-target='.navbar' data-offset='50'>

    <nav class='navbar navbar-inverse navbar-fixed-top'>

        <div class='container-fluid'>

            <div class='navbar-header'>

                <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='#myNavbar'>

                    <span class='icon-bar'></span>

                    <span class='icon-bar'></span>

                    <span class='icon-bar'></span>

                </button>

                <a class='navbar-brand' href='#'>WebSiteName</a>

            </div>

            <div>

                <div class='collapse navbar-collapse' id='myNavbar'>

                    <ul class='nav navbar-nav'>

                        <li><a href='#section1'>Section 1</a></li>

                        <li><a href='#section2'>Section 2</a></li>

                        <li><a href='#section3'>Section 3</a></li>

                        <li class='dropdown'><a class='dropdown-toggle' data-toggle='dropdown' href='#'>Section 4 <span class='caret'></span></a>

                            <ul class='dropdown-menu'>

                                <li><a href='#section41'>Section 4-1</a></li>

                                <li><a href='#section42'>Section 4-2</a></li>

                            </ul>

                        </li>

                    </ul>

                </div>

            </div>

        </div>

    </nav>

    <div id='section1' class='container-fluid'>

        <h1>Section 1</h1>

        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>

        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>

    </div>

    <div id='section2' class='container-fluid'>

        <h1>Section 2</h1>

        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>

        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>

    </div>

    <div id='section3' class='container-fluid'>

        <h1>Section 3</h1>

        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>

        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>

    </div>

    <div id='section41' class='container-fluid'>

        <h1>Section 4 Submenu 1</h1>

        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>

        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>

    </div>

    <div id='section42' class='container-fluid'>

        <h1>Section 4 Submenu 2</h1>

        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>

        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>

    </div>

</body>

</html>

Hope this will help you.

Happy Coding!

advertising
advertising

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy